<template>
  <div class="bc-filter-bar">
    <div class="header">
      <p class="title">{{ title }}</p>
    </div>
    <div
      :class="['body',{close: !isExpand&&!isCloseCompleted},{'colse-completed':!isExpand&&isCloseCompleted}]"
      :style="{ 'max-height': height }"
    >
      <slot>请填入元素</slot>
    </div>
    <div class="footer">
      <slot name="footer">
        <div
          class="flex-arrow"
          :class="{open: isExpand}"
          @click="expandBody">
          <bSvgIcon :icon-class = "isExpand? 'shouqi':'zhankai'" />
        </div>
        
        <e-button
          type="primary"
          @click="$emit('toSearch')">搜索</e-button>
        <e-button
          style="margin-left: 1rem"
          @click="$emit('toReset')">重置</e-button>
          
      </slot>
    </div>
  </div>
</template>
<script>
export default {
  name: 'ComplexSearchPane',
  props: {
    title: {
      type: String,
      default: '筛选条件'
    },
    isCloseCompleted: {
      type: Boolean,
      default: false
    },
    closeHeight: {
      type: String,
      default: '11rem'
    },
    expandHeight: {
      type: String,
      default: '100rem'
    }
  },
  data () {
    return {
      isExpand: false // 控制折叠
    }
  },
  computed: {
    height () {
      return this.isExpand ? this.expandHeight : this.closeHeight
    }
  },
  methods: {
    expandBody () {
      this.isExpand = !this.isExpand
    }
  }
}
</script>
